<template>
  <div class="ff-header">
    <div class="logo">logo</div>
    <div class="ff-tabs">
      <el-tabs :value="editableTabsValue" @tab-click="tabClick" type="card" closable @tab-remove="removeTab">
        <el-tab-pane
            v-for="item in editableTabs"
            :key="item.id"
            :label="item.title"
            :name="item.url"
        >
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import route from "@/router";

export default {
  name: "ffHeader",
  computed:{
    editableTabs(){
      return this.$store.state.tabs.activeRouter
    },
    activeComponent(){
      return this.$store.state.tabs.activeComponent
    }
  },
  watch:{
    activeComponent:{
      handler(val){
        this.editableTabsValue = val ? val.url : ''
      }
    }
  },
  data() {
    return {
      editableTabsValue:''
    }
  },
  mounted() {
  },
  methods:{
    removeTab(key){
      this.$store.commit('tabs/DelActiveRouter',key)
    },
    tabClick(tab){
      if(this.editableTabsValue === tab.name){
        console.log(123,this.editableTabsValue,tab.name)
        return false
      }
      this.$store.commit('tabs/SwitchActiveComponent',tab.name)
    }
  }
}
</script>

<style lang="less" scoped>
  .ff-header{
    display: flex;
    flex-direction: row;
    background: #1f272c;
    .logo{
      width: 64px;
      height: 42px;
      line-height: 42px;
      min-width: 64px;
      max-width: 64px;
      color: #fff;
      text-align: center;
    }
    .ff-tabs{
      height: 42px;
      line-height: 1;
      /deep/.el-tabs__content{
        display: none!important;
      }
      /deep/.el-tabs__header{
        margin-bottom: 0;
      }
      /deep/.el-tabs__nav{
        border: none;
        border-radius: none;
      }
      /deep/.el-tabs__item{
        height: 43px;
        line-height: 43px;
        padding:0 10px;
        color: #fff;
        border: none;
        &.is-active{
          color: #000;
          background: #fff;
        }
        //&:last-child{
        //  padding: 0;
        //}
      }
    }
  }
</style>